<template>
  <div class="setter-wrap">
    <el-button type="primary" class="save-button" @click="handleSubmit">保存</el-button>
    <el-divider></el-divider>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="业务模块" prop="module">
        <el-select v-model="form.module" placeholder="请选择业务模块">
          <el-option
              v-for="item in moduleList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-link type="primary" :underline="false" class="add-button" @click="addCustom">
          <i class="el-icon-circle-plus-outline"></i>
          添加查询参数
        </el-link>
      </el-col>
    </el-row>
    <el-table :data="tableData" :border="true"  style="width: 100%">
      <el-table-column label="名称编码" prop="queryParam">
        <template slot-scope="scope">
          <el-select v-model="scope.row.queryParam" placeholder="请选择名称编码">
            <el-option
                v-for="item in selectList"
                :key="item.option"
                :label="item.option"
                :value="item.option">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="布尔运算" prop="boolOption">
        <template slot-scope="scope">
          <el-input v-model="scope.row.boolOption" readonly></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-link type="primary" :underline="false" class="add-button" @click="addCustom">
      <i class="el-icon-circle-plus-outline"></i>
      添加查询参数
    </el-link>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24">
        <el-link type="primary" :underline="false" class="add-button" @click="addResponse">
          <i class="el-icon-circle-plus-outline"></i>
          添加返回字段
        </el-link>
      </el-col>
    </el-row>
    <el-table :data="responseData" :border="true"  style="width: 100%">
      <el-table-column label="返回字段" prop="column">
        <template slot-scope="scope">
          <el-input v-model="scope.row.column" ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {saveOrUpdate, getByBelongNodeId} from '@/api/queryConfig.js'
import {getByArrangeId} from '@/api/compilationInParameter.js'
import {constantData} from "@/mock/constant";

export default {
  props: {
    lf: Object,
    context: Object,
    current: Object,
    currentData: Object,
    value: [String, Number, Boolean, Object, Array]
  },
  data() {
    return {
      moduleList: constantData.moduleList,
      selectList: [],
      tableData: [],
      responseData: [],
      form: {
        module: '',
      }
    }
  },

  mounted() {
    this.getData();
    this.getSelectOption();
  },

  methods: {

    handleSubmit() {
      this.form.arrangeId = window.localStorage.getItem('arrangeId');
      this.form.belongNodeId = this.currentData.id;
      this.form.queryParameterList = this.tableData;
      const columnList = this.responseData.map(item => {
        return item.column
      })
      this.form.queryResponse = {module: this.form.module, columnList: columnList};
      saveOrUpdate(this.form).then(res =>{
        if (res.code === '0') {
          this.$message.success('保存成功');
        } else {
          this.$message.error('保存失败');
        }
      });
    },

    getData() {
        getByBelongNodeId(this.currentData.id).then(res => {
          if (res.code === '0' && res.data) {
            this.form.module = res.data.module;
            this.tableData = res.data.queryParameterList;
            this.responseData = res.data.queryResponse.columnList.map(item => {
              return {column: item}
            })
          }
        })
    },

    getSelectOption() {
      const arrangeId = window.localStorage.getItem('arrangeId');
      getByArrangeId(arrangeId).then(res => {
        if (res.code === '0' && res.data) {
          const list = res.data.requestParameterList.map(item => {
            return {option: item.name + '/' + item.code}
          })
          this.selectList = list
        }
      });
    },
    addCustom() {
      const item = {
        queryParam: '',
        boolOption: 'and'
      }
      this.tableData.push(item)
    },
    addResponse() {
      const item = {
        column: ''
      }
      this.responseData.push(item)
    }
  }
}
</script>

<style scoped lang="less">
.setter-wrap {
  background: #f3f6fa;
  border-radius: 4px;
  font-size: 12px;
  color: #303a51;
  line-height: 16px;
  font-weight: 400;
  padding: 9px 12px;
}
.label {
  margin-right: 10px;
}
.input {
  width: 90%;
}
.tip {
  color: #a0a1a5;
  margin-top: 8px;
}
.add-button {
  margin-top: 10px;
}
.save-button {
  margin-left: 85%;
}
.el-row {
  height: 35px;
  background-color: #ffffff;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
